<template>
  <div class="container">
    <div class="page">
      <div class="page__bd page__bd_spacing">
        <div class="weui-cell">
          <div class="weui-cell__bd">
            <div class="weui-uploader">
              <div class="weui-uploader__hd">
                <div class="weui-uploader__title">图片上传</div>
                <div class="weui-uploader__info">
                  {{user.photo?user.photo.length:0}}/5
                </div>
              </div>
              <div class="weui-uploader__bd">
                <div class="weui-uploader__files" id="uploaderFiles">
                  <div v-for="(item ,index) in photos" :key="index">
                    <div class="weui-uploader__file">
                      <image class="weui-uploader__img" :src="item" mode="aspectFill" @click="predivImage(item)"/>
                      <image class="delete-icon" src="/static/images/component/del.png"
                             @click="deleteImg(item)"></image>
                    </div>
                  </div>
                </div>
                <div class="weui-uploader__input-box">
                  <div class="weui-uploader__input" @click="chooseImage"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="notice">上传的相片经审核通过后方可公开展示</div>
  </div>
</template>

<script>
  export default {
    computed: {
      user() {
        return this.$store.state.user
      }
    },
    data() {
      return {
        photos: []
      };
    },
    methods: {
      chooseImage(e) {
        let _this = this;
        wx.chooseImage({
          success: chooseResult => {
            var split = chooseResult.tempFilePaths[0].split('.');
            var type = split[split.length - 1];

            // 将图片上传至云存储空间
            wx.cloud.uploadFile({
              // 指定上传到的云路径
              cloudPath: 'image/photo/' + _this.user.openid + _this.$uuid(10, 36) + type,
              // 指定要上传的文件的小程序临时文件路径
              filePath: chooseResult.tempFilePaths[0],
              // 成功回调
              success: res => {
                if (!_this.photos) {
                  _this.photos = [];
                }
                _this.photos.push(res.fileID);
                wx.cloud.callFunction({
                  name: 'updateUserPhoto',
                  data: {
                    openid: _this.user.openid,
                    photo: _this.photos
                  }
                }).then(res => {
                  console.log(res);
                  //debugger
                  _this.$store.commit('updatePhoto', _this.photos);
                  wx.showToast({
                    title: '上传成功',
                    icon: 'success',
                    duration: 1500
                  });
                })
              },
              fail: res => {
                console.log(res)
              }
            })
          },
        });
      },
      predivImage(id) {
        wx.previewImage({
          current: id, // 当前显示图片的http链接
          urls: this.user.photo// 需要预览的图片http链接列表
        });
      },
      deleteImg(id) {
        let _this = this;
        //debugger
        var files = [];
        files.push(id);
        wx.cloud.deleteFile({
          fileList: files
        }).then(res => {
          _this.photos.splice(_this.photos.indexOf(id), 1);
          wx.cloud.callFunction({
            name: 'updateUserPhoto',
            data: {
              openid: _this.user.openid,
              photo: _this.photos
            }
          }).then(res => {
            console.log(res);
            _this.$store.commit('updatePhoto', _this.photos);
            wx.showToast({
              title: '删除成功',
              icon: 'success',
              duration: 1500
            });
          })
        })
      }
    },
    onShow() {
      wx.setNavigationBarTitle({title: '上传相片'})
      this.photos = this.user.photo
    }
  };
</script>

<style>
  .container {
    width: 100%;
    height: 100vh;
    background-color: #F7F7F7;
    overflow: hidden;
    font-family: PingFang-SC;
  }

  .weui-uploader__file {
    position: relative;
  }

  .weui-uploader__bd {
    overflow: visible;
  }

  .delete-icon {
    position: absolute;
    width: 6vw;
    height: 6vw;
    background: transparent;
    right: 5px;
    bottom: 5px;
    border-radius: 40px;
    z-index: 5;
  }

  .notice {
    position: absolute;
    width: 100vw;
    text-align: center;
    font-size: 2vh;
    font-family: PingFang-SC;
    color: darkseagreen;
  }
</style>
